<template>
	<view class="my-page">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<!-- 背景装饰 -->
			<view class="card-bg"></view>

			<!-- 顶部操作栏 -->
			<view class="top-bar" v-if="isLogin">
				<!-- 左侧：在线状态和地址 -->
				<view class="left-info">
					<view class="online-status" @click="handleStatusChange">
						<view class="status-dot" :class="onlineStatus"></view>
						<text class="status-text">{{ statusText }}</text>
					</view>
					<text class="location-text">{{ location }}</text>
				</view>
				
				<!-- 右侧：消息图标 -->
				<view class="message-icon-btn" @click="handleMessages">
					<up-icon name="bell" size="22" color="#ffffff"></up-icon>
					<view v-if="unreadCount > 0" class="message-badge-dot">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="user-info" v-if="isLogin">
				<up-image :src="userInfo.avatar" width="120rpx" height="120rpx" shape="circle" class="avatar"
					@click="handlePreviewAvatar"></up-image>
				<view class="user-details" @click="handleGoUserInfo">
					<text class="nickname">{{ userInfo.nickname }}</text>
					<text class="user-desc">{{ userInfo.introduction || '这个人很懒，什么都没留下' }}</text>
				</view>
				<up-icon name="arrow-right" color="#ffffff" size="20" @click="handleGoUserInfo"></up-icon>
			</view>

			<!-- 未登录状态 -->
			<view class="user-info" v-else @click="handleGoLogin">
				<up-image src="https://picsum.photos/200/200?random=999" width="120rpx" height="120rpx" shape="circle"
					class="avatar"></up-image>
				<view class="user-details">
					<text class="nickname">点击登录</text>
					<text class="user-desc">登录后体验更多功能</text>
				</view>
				<up-icon name="arrow-right" color="#ffffff" size="20"></up-icon>
			</view>

			<!-- 统计数据 -->
			<view class="user-stats" v-if="isLogin">
				<view class="stat-item" @click="handleMyPosts">
					<text class="stat-value">{{ stats.postCount }}</text>
					<text class="stat-label">帖子</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="handleMyFollowing">
					<text class="stat-value">{{ stats.followingCount }}</text>
					<text class="stat-label">关注</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="handleMyFollowers">
					<text class="stat-value">{{ stats.followerCount }}</text>
					<text class="stat-label">粉丝</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item" @click="handleMyCollections">
					<text class="stat-value">{{ stats.collectCount }}</text>
					<text class="stat-label">收藏</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<!-- 我的内容 -->
			<view class="menu-group">
				<view class="menu-title">我的内容</view>
				<view class="menu-item" @click="handleMyPosts">
					<up-icon name="edit-pen" size="20" color="#36d399"></up-icon>
					<text class="menu-text">我的帖子</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
				<view class="menu-item" @click="handleMyCollections">
					<up-icon name="star" size="20" color="#ff9f1c"></up-icon>
					<text class="menu-text">我的收藏</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
				<view class="menu-item" @click="handleMyLikes">
					<up-icon name="heart" size="20" color="#ff4d4f"></up-icon>
					<text class="menu-text">我的点赞</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
			</view>

		<!-- 社交 -->
		<view class="menu-group">
			<view class="menu-title">社交</view>
			<view class="menu-item" @click="handleMyFollowing">
				<up-icon name="account" size="20" color="#4D80F0"></up-icon>
				<text class="menu-text">我的关注</text>
				<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
			</view>
			<view class="menu-item" @click="handleMyFollowers">
				<up-icon name="account-fill" size="20" color="#9c27b0"></up-icon>
				<text class="menu-text">我的粉丝</text>
				<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
			</view>
			<view class="menu-item" @click="handleJoinChatroom">
				<up-icon name="chat" size="20" color="#667eea"></up-icon>
				<text class="menu-text">加入聊天室</text>
				<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
			</view>
		</view>

			<!-- 设置 -->
			<view class="menu-group">
				<view class="menu-title">设置</view>
				<view class="menu-item" @click="handleEditProfile">
					<up-icon name="setting" size="20" color="#666666"></up-icon>
					<text class="menu-text">编辑资料</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
				<view class="menu-item" @click="handleFeedback">
					<up-icon name="chat" size="20" color="#667eea"></up-icon>
					<text class="menu-text">建议与反馈</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
				<view class="menu-item" @click="handleAbout">
					<up-icon name="info-circle" size="20" color="#666666"></up-icon>
					<text class="menu-text">关于我们</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-section" v-if="isLogin">
			<up-button type="error" @click="handleLogout" plain>退出登录</up-button>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	computed,
	onMounted
} from 'vue';
import {
	onShow
} from '@dcloudio/uni-app';
import showToast from '../../utils/showToast.js';
import { getUnreadCount } from '../../server/api/message.js';

// 状态
const isLogin = ref(false);
const userInfo = ref({});
const stats = reactive({
	postCount: 0,
	followingCount: 0,
	followerCount: 0,
	collectCount: 0
});

// 未读消息数量
const unreadCount = ref(0);

// 在线状态：online(在线)、hidden(隐藏)、offline(下线)
const onlineStatus = ref('online');

// 地理位置
const location = ref('');

// 状态文字
const statusText = computed(() => {
	const statusMap = {
		online: '在线',
		hidden: '隐藏',
		offline: '下线'
	};
	return statusMap[onlineStatus.value] || '在线';
});

/**
 * 获取地理位置
 */
const getLocation = async () => {
	try {
		// 这里可以调用后端接口根据IP获取真实位置
		// 目前使用模拟数据
		location.value = '广东省-深圳市';
	} catch (error) {
		console.error('获取位置失败:', error);
		location.value = '未知位置';
	}
};

/**
 * 切换在线状态
 */
const handleStatusChange = () => {
	uni.showActionSheet({
		itemList: ['在线', '隐藏', '下线'],
		success: (res) => {
			const statusMap = ['online', 'hidden', 'offline'];
			onlineStatus.value = statusMap[res.tapIndex];
			
			// 保存到本地存储
			uni.setStorageSync('onlineStatus', onlineStatus.value);
			
			showToast(`已切换到${['在线', '隐藏', '下线'][res.tapIndex]}状态`, 'success');
		}
	});
};

/**
 * 检查登录状态
 */
const checkLoginStatus = () => {
	const token = uni.getStorageSync('token');
	const savedUserInfo = uni.getStorageSync('userInfo');

	if (token && savedUserInfo) {
		isLogin.value = true;
		userInfo.value = savedUserInfo;

		// 模拟统计数据
		stats.postCount = 15;
		stats.followingCount = 23;
		stats.followerCount = 45;
		stats.collectCount = 12;

		// 加载未读消息数量
		loadUnreadCount();
		
		// 加载地理位置
		getLocation();
		
		// 加载在线状态
		const savedStatus = uni.getStorageSync('onlineStatus');
		if (savedStatus) {
			onlineStatus.value = savedStatus;
		}
	} else {
		isLogin.value = false;
		unreadCount.value = 0;
	}
};

/**
 * 加载未读消息数量
 */
const loadUnreadCount = async () => {
	try {
		const res = await getUnreadCount();
		if (res.code === 200) {
			unreadCount.value = res.data.total || 0;
		}
	} catch (error) {
		console.error('加载未读消息数量失败:', error);
	}
};

	/**
	 * 跳转到登录页
	 */
	const handleGoLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	};

	/**
	 * 预览头像
	 */
	const handlePreviewAvatar = () => {
		if (!isLogin.value) {
			return;
		}
		uni.previewImage({
			urls: [userInfo.value.avatar],
			current: 0
		});
	};

	/**
	 * 跳转到个人信息页面
	 */
	const handleGoUserInfo = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: `/pages/user/userInfo?userId=${userInfo.value.userId}`
		});
	};

	/**
	 * 编辑资料
	 */
	const handleEditProfile = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: '/pages/my/editProfile'
		});
	};

	/**
	 * 我的帖子
	 */
	const handleMyPosts = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: '/pages/my/myPosts'
		});
	};

	/**
	 * 我的收藏
	 */
	const handleMyCollections = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: '/pages/my/myCollections'
		});
	};

	/**
	 * 我的点赞
	 */
	const handleMyLikes = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		showToast('我的点赞功能开发中', 'none');
	};

	/**
	 * 我的关注
	 */
	const handleMyFollowing = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: '/pages/my/followList?tab=0'
		});
	};

	/**
	 * 我的粉丝
	 */
	const handleMyFollowers = () => {
		if (!isLogin.value) {
			handleGoLogin();
			return;
		}
		uni.navigateTo({
			url: '/pages/my/followList?tab=1'
		});
	};

/**
 * 加入聊天室
 */
const handleJoinChatroom = () => {
	if (!isLogin.value) {
		handleGoLogin();
		return;
	}
	uni.navigateTo({
		url: '/pages/my/joinChatroom'
	});
};

/**
 * 消息通知
 */
const handleMessages = () => {
	if (!isLogin.value) {
		handleGoLogin();
		return;
	}
	uni.navigateTo({
		url: '/pages/message/messageList'
	});
};

	/**
	 * 建议与反馈
	 */
	const handleFeedback = () => {
		uni.navigateTo({
			url: '/pages/my/feedbackList'
		});
	};

	/**
	 * 关于我们
	 */
	const handleAbout = () => {
		showToast('关于我们功能开发中', 'none');
	};

	/**
	 * 退出登录
	 */
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除登录信息
					uni.removeStorageSync('token');
					uni.removeStorageSync('userInfo');

					showToast('已退出登录', 'success');

					// 刷新页面
					checkLoginStatus();
				}
			}
		});
	};

	// 页面显示时检查登录状态（从登录页返回时会触发）
	onShow(() => {
		checkLoginStatus();
	});

	// 页面加载时检查登录状态
	onMounted(() => {
		checkLoginStatus();
	});
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.my-page {
	min-height: 100vh;
	background: $bg-page;
	padding-bottom: 120rpx;
}

// 用户信息卡片
.user-card {
	position: relative;
	@include gradient-bg(135deg, #667EEA, #764BA2);
	padding: $spacing-xxl $spacing-xxl $spacing-xxl;
	overflow: hidden;

	.card-bg {
		position: absolute;
		top: -100rpx;
		right: -100rpx;
		width: 400rpx;
		height: 400rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
	}

	// 顶部操作栏
	.top-bar {
		position: relative;
		@include flex-between;
		margin-bottom: $spacing-xxl;
		z-index: 10;

		// 左侧：在线状态和地址
		.left-info {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;

			.online-status {
				display: flex;
				align-items: center;
				background: rgba(255, 255, 255, 0.2);
				padding: $spacing-xs $spacing-base;
				border-radius: $radius-round;
				backdrop-filter: blur(10px);
				transition: all $transition-fast;
				flex-shrink: 0;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 0.3);
				}

				.status-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					margin-right: $spacing-xs;

					&.online {
						background: #52c41a;
						box-shadow: 0 0 10rpx rgba(82, 196, 26, 0.8);
						animation: pulse 2s ease-in-out infinite;
					}

					&.hidden {
						background: #faad14;
						box-shadow: 0 0 10rpx rgba(250, 173, 20, 0.8);
					}

					&.offline {
						background: #8c8c8c;
					}
				}

				.status-text {
					font-size: $font-xs;
					color: #ffffff;
					font-weight: $font-medium;
				}
			}

			.location-text {
				margin-left: $spacing-base;
				font-size: $font-xs;
				color: rgba(255, 255, 255, 0.85);
				font-weight: $font-medium;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		// 右侧：消息图标
		.message-icon-btn {
			position: relative;
			width: 64rpx;
			height: 64rpx;
			@include flex-center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			backdrop-filter: blur(10px);
			transition: all $transition-fast;
			flex-shrink: 0;
			margin-left: $spacing-base;

			&:active {
				transform: scale(0.9);
				background: rgba(255, 255, 255, 0.35);
			}

			.message-badge-dot {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				min-width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				background: $color-danger;
				color: #fff;
				font-size: 18rpx;
				font-weight: $font-bold;
				text-align: center;
				border-radius: 15rpx;
				padding: 0 6rpx;
				border: 2px solid #667EEA;
				box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);
			}
		}
	}

	.user-info {
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: $spacing-lg;

		.avatar {
			flex-shrink: 0;
			border: 4px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		}

		.user-details {
			flex: 1;
			margin-left: $spacing-lg;
			margin-right: $spacing-base;

			.nickname {
				display: block;
				font-size: $font-xl;
				font-weight: $font-bold;
				color: #fff;
				margin-bottom: $spacing-xs;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			.user-desc {
				font-size: $font-sm;
				color: rgba(255, 255, 255, 0.85);
				line-height: $line-height-base;
			}
		}
	}

	.user-stats {
		position: relative;
		display: flex;
		justify-content: space-around;
		@include glass;
		border-radius: $radius-lg;
		padding: $spacing-xl 0;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

		.stat-item {
			@include flex-center;
			flex-direction: column;
			flex: 1;
			transition: all $transition-fast;

			&:active {
				transform: scale(0.95);
			}

			.stat-value {
				font-size: $font-xxl;
				font-weight: $font-bold;
				color: #fff;
				margin-bottom: $spacing-xs;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			.stat-label {
				font-size: $font-sm;
				color: rgba(255, 255, 255, 0.85);
			}
		}

		.stat-divider {
			width: 1px;
			background: rgba(255, 255, 255, 0.3);
		}
	}
}

// 状态点闪烁动画
@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

// 功能菜单
.menu-section {
	padding: $spacing-lg $spacing-xl;

	.menu-group {
		background: $bg-card;
		border-radius: $radius-md;
		margin-bottom: $spacing-lg;
		overflow: hidden;
		box-shadow: $shadow-sm;

		.menu-title {
			padding: $spacing-lg $spacing-xl $spacing-base;
			font-size: $font-sm;
			color: $text-tertiary;
		}

		.menu-item {
			@include flex-between;
			padding: $spacing-lg $spacing-xl;
			border-bottom: 1px solid $border-light;
			transition: background $transition-fast;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: $bg-hover;
			}

			.menu-text {
				flex: 1;
				margin-left: $spacing-lg;
				font-size: $font-base;
				color: $text-primary;
			}
		}
	}
}

// 退出登录
.logout-section {
	padding: 0 $spacing-xl;
	margin-top: $spacing-xxl;

	.u-button {
		width: 100%;
		height: 90rpx;
		font-size: $font-base;
	}
}
</style>
